/*
 * Copyright ©
 * #
 * @author: zw
 * @date: 2021-09-07
 */

import { defineComponent } from "vue";
import "./css/Magnifier.scss";
import { magnifier } from './directives'
export default defineComponent({
  name: "Magnifier",
  directives: { magnifier },
  props: {
    imgUrl: { type: String, required: true },
    imgAlt: { type: String, default: '' },
    link: { type: String, default: '' },
    blank: { type: Boolean, default: false },
    imgWidth: { type: Number, default: 375 },
    imgHeight: { type: Number, default: 500 },
    magWidth: { type: Number, default: 150 },
    magHeight: { type: Number, default: 150 },
  },
  setup(props, { emit, slots }) {
    return () => {
      const { imgUrl, imgAlt, link, blank, imgWidth, imgHeight, magWidth, magHeight, } = props;
      return <div class="magnifier-wrap" v-magnifier
        style={{ width: imgWidth + 'px', height: imgHeight + 'px' }}
      >
        <a
          class="mag-wrap"
          href={link}
          target={blank ? '_blank' : ''}
          alt={imgAlt}
          style={{ width: magWidth + 'px', height: magHeight + 'px' }}
        >
          <img
            class="mag-img"
            src={imgUrl}
            alt={imgAlt}
            style={{ width: imgWidth + 'px', height: imgHeight + 'px' }}
          />
        </a>
        <a href={link} class="img-link">
          <img
            class="static-img"
            src={imgUrl}
            alt={imgAlt}
          />
        </a>
      </div>;
    };
  },
});
